<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :data="dataAlarmList"
      style="width: 100%;min-width: 800px;margin-top:30px;"
      border
    >
      <el-table-column align="center" label="报警ID" width="100">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="报警名" width="100">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="符号" width="100">
        <template slot-scope="scope">
          {{ scope.row.operator }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="边界值" width="100">
        <template slot-scope="scope">
          {{ scope.row.threshold }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="报警等级" width="100">
        <template slot-scope="scope">
          {{ scope.row.level }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="沉默周期" width="100">
        <template slot-scope="scope">
          {{ scope.row.cycle }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="webhook" width="100">
        <template slot-scope="scope">
          {{ scope.row.webhook }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="创建时间" width="150">
        <template slot-scope="scope">
          {{ scope.row.createTime | parseTime }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="150" min-width="150">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="handleUpdateAlarm(scope)">修改</el-button>
          <el-button type="danger" size="small" @click="handleDeleteAlarm(scope)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="add-button-container">
      <div class="add-button-item">
        <el-button class="add-button" type="primary" @click="handleAddAlarm">添加报警</el-button>
      </div>
    </div>

    <el-dialog
      :visible.sync="dialogVisible"
      :title="dialogType==='edit'?'更新报警':'添加报警'"
    >
      <el-form
        ref="alarmForm"
        :model="alarmForm"
        :rules="rules"
        class="add-alarm-container"
      >
        <el-form-item label="指标ID" prop="quotaId">
          <el-input v-model="alarmForm.quotaId" type="text" placeholder="请输入指标ID" />
          <el-select v-model="alarmForm.quotaId" placeholder="请选择指标ID">
            <el-option
              v-for="item in quotaList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="报警名称" prop="name">
          <el-input v-model="alarmForm.name" type="text" placeholder="请输入报警名称" />
        </el-form-item>
        <el-form-item label="符号" prop="operator">
          <el-select v-model="alarmForm.operator" placeholder="请选择符号">
            <el-option
              v-for="item in operatorOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="边界值" prop="threshold">
          <el-input v-model="alarmForm.threshold" type="text" placeholder="请输入边界值" />
        </el-form-item>
        <el-form-item label="报警等级" prop="level">
          <el-input v-model="alarmForm.level" type="text" placeholder="请输入报警等级" />
        </el-form-item>
        <el-form-item label="沉默周期" prop="cycle">
          <el-input v-model="alarmForm.cycle" type="text" placeholder="请输入沉默周期" />
        </el-form-item>
        <el-form-item label="webhook" prop="webhook">
          <el-input v-model="alarmForm.webhook" type="text" placeholder="请输入webhook" />
        </el-form-item>

        <div style="text-align:right;">
          <el-button v-loading="loading" type="danger" @click="dialogVisible=false">取消</el-button>
          <el-button v-loading="loading" type="primary" @click="confirm">确认</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>

import { addAlarm, delAlarm, getAlarmList, updateAlarm } from '@/api/alarm'
import { getQuotaList } from '@/api/quota'

const defaultAlarmForm = {
  quotaId: '',
  name: '',
  operator: '',
  threshold: '',
  level: '',
  cycle: '',
  webhook: ''
}
const defaultOperatorOptions = [
  { label: '>', value: '>' },
  { label: '=', value: '=' },
  { label: '<', value: '<' }
]
export default {
  name: 'AlarmList',
  data() {
    return {
      loading: false,
      quotaList: [],
      alarmForm: Object.assign({}, defaultAlarmForm),
      dataAlarmList: [],
      dialogVisible: false,
      dialogType: 'new',
      listLoading: true,
      operatorOptions: Object.assign({}, defaultOperatorOptions),
      rules: {
        quotaId: [{ required: true, message: '请选择指标ID', trigger: 'blur' }],
        name: [{ required: true, message: '请输入报警名称', trigger: 'blur' }],
        operator: [{ required: true, message: '请选择符号', trigger: 'blur' }],
        threshold: [{ required: true, message: '请输入边界值', trigger: 'blur' }],
        level: [{ required: true, message: '请选择报警等级', trigger: 'blur' }],
        cycle: [{ required: true, message: '请输入沉默周期(单位:小时)', trigger: 'blur' }],
        webhook: [{ required: true, message: '请输入web钩子', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getAlarmList()
    this.getQuotaList()
  },
  methods: {
    async getAlarmList() {
      this.listLoading = true
      getAlarmList().then((response) => {
        this.dataAlarmList = response.data.alarmList
        console.log('alarmList', this.dataAlarmList)
        this.listLoading = false
      })
    },
    async getQuotaList() {
      this.listLoading = true
      getQuotaList().then((response) => {
        this.quotaList = response.data.quotaList
        console.log('alarmList', this.quotaList)
        this.listLoading = false
      })
    },
    updateAlarm() {
      this.$refs.alarmForm.validate(valid => {
        if (valid) {
          this.loading = true
          updateAlarm(this.alarmForm)
          this.loading = false
        } else {
          console.log('error update!!')
          return false
        }
      })
    },
    async handleAddAlarm() {
      this.dialogType = 'new'
      this.alarmForm = Object.assign({}, defaultAlarmForm)
      this.dialogVisible = true
    },
    handleUpdateAlarm(scope) {
      this.dialogType = 'edit'
      this.alarmForm = Object.assign({}, scope.row)
      this.dialogVisible = true
    },
    handleDeleteAlarm({ $index, row }) {
      this.$confirm('是否移除该报警?', 'Warning', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        console.log('row', row)
        await delAlarm(row)
        console.log('$index', $index)
        this.dataAlarmList.splice($index, 1)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(err => {
        console.error(err)
      })
    },
    async confirm() {
      const isEdit = this.dialogType === 'edit'
      if (!isEdit) {
        await addAlarm(this.alarmForm).then(response => {
          this.alarmForm = response.data.alarm
          this.dataAlarmList.push(this.alarmForm)
        })
      } else {
        await this.updateAlarm()
        for (let index = 0; index < this.dataAlarmList.length; index++) {
          if (this.dataAlarmList[index].number === this.alarmForm.number) {
            this.dataAlarmList[index].name = this.alarmForm.name
            this.dataAlarmList[index].description = this.alarmForm.desc
            break
          }
        }
      }
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped>

</style>
